<template>
	<el-row :gutter="12">
		<el-col :span="4">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>访问数</span>
						<el-tag class="ml-2" type="">周</el-tag>
					</div>
				</template>
				<div>
					<p class='one'>
						<span>123456</span>
						<span>
							<el-icon size="45" color="#4dcac6">
								<Avatar />
							</el-icon>
						</span>
					</p>
					<p class='two'>
						<span>总访问数:</span>
						<span>
							66666
						</span>
					</p>
				</div>
			</el-card>
		</el-col>
		<el-col :span="4">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>新注册用户</span>
						<el-tag class="ml-2" type="success">周</el-tag>
					</div>
				</template>
				<div>
					<p class='one'>
						<span>123456</span>
						<span>
							<el-icon size="45" color="#39a6f5">
								<Promotion />
							</el-icon>
						</span>
					</p>
					<p class='two'>
						<span>总访问数:</span>
						<span>
							66666
						</span>
					</p>
				</div>
			</el-card>
		</el-col>
		<el-col :span="4">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>求职</span>
						<el-tag class="ml-2" type="danger">周</el-tag>
					</div>
				</template>
				<div>
					<p class='one'>
						<span>123456</span>
						<span>
							<el-icon size="45" color="#f04c6b">
								<HelpFilled />
							</el-icon>
						</span>
					</p>
					<p class='two'>
						<span>总访问数:</span>
						<span>
							66666
						</span>
					</p>
				</div>
			</el-card>
		</el-col>
		<el-col :span="4">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>房产</span>
						<el-tag class="ml-2" type="danger">周</el-tag>
					</div>
				</template>
				<div>
					<p class='one'>
						<span>123456</span>
						<span>
							<el-icon size="45" color="#7F3CFF">
								<Histogram />
							</el-icon>
						</span>
					</p>
					<p class='two'>
						<span>总访问数:</span>
						<span>
							66666
						</span>
					</p>
				</div>
			</el-card>
		</el-col>
		<el-col :span="4">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>招聘</span>
						<el-tag class="ml-2" type="warning">周</el-tag>
					</div>
				</template>
				<div>
					<p class='one'>
						<span>123456</span>
						<span>
							<el-icon size="45" color="#F7941D">
								<Stamp />
							</el-icon>
						</span>
					</p>
					<p class='two'>
						<span>总访问数:</span>
						<span>
							66666
						</span>
					</p>
				</div>
			</el-card>
		</el-col>
		<el-col :span="4">
			<el-card class="box-card">
				<template #header>
					<div class="card-header">
						<span>合作</span>
						<el-tag class="ml-2" type="success">周</el-tag>
					</div>
				</template>
				<div>
					<p class='one'>
						<span>123456</span>
						<span>
							<el-icon size="45" color="#F580A6">
								<Flag />
							</el-icon>
						</span>
					</p>
					<p class='two'>
						<span>总访问数:</span>
						<span>
							66666
						</span>
					</p>
				</div>
			</el-card>
		</el-col>
	</el-row>

	<div class='e-data'>
		<el-row :gutter="12">
			<el-col :span="8" v-for='(option ,index ) in options' :key="index">
				<LineChart :option='option'></LineChart>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import LineChart from '@/components/echarts/LineChart.vue'
	const options = ref([{
			title: {
				text: '信息'
			},
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			toolbox: {
				feature: {
					saveAsImage: {}
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
				type: 'value'
			},
			series: [{
					name: 'Email',
					type: 'line',
					stack: 'Total',
					data: [120, 132, 101, 134, 90, 230, 210]
				},
				{
					name: 'Union Ads',
					type: 'line',
					stack: 'Total',
					data: [220, 182, 191, 234, 290, 330, 310]
				},
				{
					name: 'Video Ads',
					type: 'line',
					stack: 'Total',
					data: [150, 232, 201, 154, 190, 330, 410]
				},
				{
					name: 'Direct',
					type: 'line',
					stack: 'Total',
					data: [320, 332, 301, 334, 390, 330, 320]
				},
				{
					name: 'Search Engine',
					type: 'line',
					stack: 'Total',
					data: [820, 932, 901, 934, 1290, 1330, 1320]
				}
			]
		},
		{
			title: {
				text: '网站数据',
				subtext: 'Fake Data',
				left: 'center'
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left'
			},
			series: [{
				name: 'Access From',
				type: 'pie',
				radius: '50%',
				data: [{
						value: 1048,
						name: 'Search Engine'
					},
					{
						value: 735,
						name: 'Direct'
					},
					{
						value: 580,
						name: 'Email'
					},
					{
						value: 484,
						name: 'Union Ads'
					},
					{
						value: 300,
						name: 'Video Ads'
					}
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		},
		{
			title: {
				text: '激活数据',
				subtext: 'Demo 虚构数据',
				x: 'right'
			},

			legend: {
				orient: 'horizontal',
				x: 'left',
				y: 'top',
				data: ['猜想', '预期', '实际']
			},
			grid: {
				top: '20%',
				left: '3%',
				right: '10%',
				bottom: '5%',
				containLabel: true
			},
			xAxis: {
				name: '月份',
				type: 'category',
				data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', ]
			},
			yAxis: {
				name: '人次',
				type: 'value',
				min: 0, // 配置 Y 轴刻度最小值
				max: 4000, // 配置 Y 轴刻度最大值
				splitNumber: 7, // 配置 Y 轴数值间隔
			},

			series: [ // 多组折线图数据
				{
					name: '猜想',
					data: [454, 226, 891, 978, 901, 581, 400, 543, 272, 955, 1294, 1581],
					type: 'line'
				},

				{
					name: '预期',
					data: [2455, 2534, 2360, 2301, 2861, 2181, 1944, 2197, 1745, 1810, 2283, 2298],
					type: 'line',
				},

				{
					name: '实际',
					data: [1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 3170, 3665],
					type: 'line'
				}
			],
			color: ['#3366CC', '#FFCC99', '#99CC33']
		}
	])
</script>

<style scoped lang="scss">
	:deep(.el-card__header) {
		padding: 5px 10px;
	}

	:deep(.el-card__body) {
		padding: 10px;
	}

	.card-header {
		height: 36px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
	}

	.text {
		font-size: 12px;
	}

	.item {
		margin-bottom: 18px;
	}

	.box-card {
		width: 180px;
	}

	.one,
	.two {
		display: flex;
		justify-content: space-between;
	}

	.two {
		font-size: 14px;
	}

	p {
		margin: 0;
	}

	.e-data {
		margin-top: 20px;
	}
</style>